<html>
<head>
<style type="text/css">

body {
	margin: 0px;
	overflow: hidden;
}

div.hex {
	position: absolute;
	background-image: url('0.png');
	width:  80px;
	height: 80px;
}
div.selected {
	background-image: url('1.png');
}

img.hex {
	position: absolute;
}

</style>
<script type="text/javascript">
if (!window.console) console = {};
console.log   = console.log   || function() {};
console.warn  = console.warn  || function() {};
console.error = console.error || function() {};
console.info  = console.info  || function() {};

function load() {
	var w = 6, h = 6;
	for (var j = 0; j < h; ++j) {
		for (var i = 0; i < w; ++i) {
			if (isEven(j) && i == w-1) continue;
			if (Math.random() < 0.2) continue;

			var id = ij2id(i, j);
			var hex = createHex(id, 0, i, j);

			addHex(hex);
		}
	}
}

var hexes = new Array();
function addHex(hex) {
	hexes.push(hex);
	document.body.appendChild(hex);
}
function getHex(id) {
	for (var i = 0; i < hexes.length; ++i) {
		var hex = hexes[i];
		if (hex.id == id) return hex;
	}
	return 0;
}

function createHex(id, type, i, j) {
	var x = ij2x(i, j);
	var y = ij2y(i, j);
//	var hex = createImg(id, "hex", "gfx/"+ type +".png", x, y, hexOnClick);
	var hex = createDiv(id, "hex", x, y);
	hex.i = i;
	hex.j = j;
	hex.onclick = hexOnClick;

	if (Math.random() < 0.2) {
		var img = createImg(id +"x", "", "gfx/x.png", 0, 0);
//		img.onclick = function(event) { hex.onclick(event, hex); };
		img.onclick = function(event) { onclickhandler(event, img); }
		img.handleclick = function(event) {}
		hex.appendChild(img);
	}

	return hex;
}
function onclickhandler(event, handler) {
	console.log("onclick1 "+ handler);
	if (!handler) return;
	console.log("onclick2 "+ handler.id);

	if (!handler.handleclick || !handler.handleclick(event)) {
		console.log("1");
		if (handler.nextSibling) {
			console.log("11");
			onclickhandler(event, handler.nextSibling);
		} else {
			console.log("12");
			onclickhandler(event, handler.parentNode);
		}
	} else {
		console.log("2");
	}
}

function hexOnClick(event, hex) {
	if (!hex) hex = event.target;
	console.log("hex click: "+ hex.id);

	var x = (event.x - hex.offsetLeft) - 40;
	var y = (event.y - hex.offsetTop)  - 40;
	var i = hex.i;
	var j = hex.j;

	var z = "?";
	if (x >= 0) {
		if (( x/2-30) > y) {
			if (isEven(j)) i += 1;
			j -= 1;
			z = "top right ("+ (x/2-30) +":"+ y +")";
		}
		else if ((-x/2+30) < y) {
			if (isEven(j)) i += 1;
			j += 1;
			z = "bottom right ("+ (-x/2+30) +":"+ y +")";
		}
		else {
			z = "right";
		}
	} else {
		if ((-x/2-30) > y) {
			if (isOdd(j)) i -= 1;
			j -= 1;
			z = "top left ("+ (-x/2-30) +":"+ y +")";
		}
		else if (( x/2+30) < y) {
			if (isOdd(j)) i -= 1;
			j += 1;
			z = "bottom left ("+ (x/2+30) +":"+ y +")";
		}
		else {
			z = "left";
		}
	}

	var id = ij2id(i, j);
	var t = getHex(id);
//	if (t) t.src = "1.png";
	if (t) t.className = "hex selected";

	console.log(z);
}
function createDiv(id, className, x, y) {
	var div = document.createElement("div");
	div.id = id;
	div.className = className;
	div.style.left = x;
	div.style.top  = y;
	return div;
}
function createImg(id, className, src, x, y) {
	var img = document.createElement("img");
	img.id = id;
	img.className = className;
	img.src = src;
	img.style.left = x;
	img.style.top  = y;
	return img;
}

function isEven(j) {
	return (j % 2) == 0;
}
function isOdd(j) {
	return (j % 2) != 0;
}

function ij2id(i, j) {
	var id = i + j * 10;
	return id;
}
function ij2x(i, j) {
	var x = i * 80 + (isEven(j) ? 40 : 0);
	return x;
}
function ij2y(i, j) {
	var y = j * 40;
	return y;
}
function xy2i(x, y) {
}
function xy2j(x, y) {
}

</script>
</head>

<body onload="load()">
</body>
</html>
